<template>
  <div>
    <!-- 引入头部组件 -->
    <con-title :info="Toptitle"></con-title>
    <!-- 表格 -->
    <div class="tab">
      <div class="search">
        <el-tabs type="border-card" v-model="activeName">
          <el-tab-pane label="所有节点" name="all"></el-tab-pane>
           <el-form :inline="true" :model="query" class="demo-form-inline">
              <el-form-item label="群组名称">
                <el-input
                  v-model="groupName"
                  placeholder="群组名称"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="dialogFormVisible = true" icon="el-icon-plus"
                  >新增群组</el-button
                >
              </el-form-item>
              <el-dialog title="提示" :visible.sync="dialogFormVisible" width="30%">
                   <el-form :model="query" width="100%">
                        <el-form-item :label-width="formLabelWidth" width="100%">
                            <el-input v-model="query.groupName" autocomplete="off" placeholder="群组名称"></el-input>
                        </el-form-item>
                   </el-form>
                   <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                   </div>
              </el-dialog>
            </el-form>
        </el-tabs>
      </div>
      <el-table :data="grouplist[query.pageNum]" border style="width: 100%">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="groupName" label="群组名称"> </el-table-column>
        <el-table-column prop="nodeNums" label="传感器节点数量">
        </el-table-column>
        <el-table-column prop="groupNums" label="在线设备数量">
        </el-table-column>
        <el-table-column prop="cTime" label="创建时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.pageNum"
          :page-sizes="[5, 15, 20, 30]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//引入组件
import ConTitle from "@/components/ConTitle.vue";
// import Search from "../../components/search.vue";
//引入后台数据
import { $groupList } from "@/api/index.js";
export default {
  name: "grouplist",
  components: { ConTitle },
  data() {
    return {
      Toptitle: {
        type: "设备/",
        text: "节点群组",
        msg: "-以分组形式管理节点设备、提供了搜索、添加新的群组、重命名、移动设备等功能",
      },
      activeName: "all", //默认打开tab状态
      grouplist: [],
      query: {
        pageNum: 0,
        pageSize: 5,
      },
      total: 0,
      groupName: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '200px'
    };
  },
  created() {
    this.getGroupList();
  },
  methods: {
    onSubmit() {
     console.log(this.groupName);
      console.log("表单提交了",this.grouplist[0]);
      // this.getGroupList();
      // this.grouplist = this.grouplist.find(item=>item.groupName == this.groupName);
      console.log(this.grouplist.find(item=>item.groupName == this.groupName));
    },
    
    getGroupList() {
      $groupList(this.pageNum).then((res) => {
        console.log(res.data.data.length);
        let chunk =5;//每5个一组
        for(var i = 0,j = res.data.data.length;i<j;i+=chunk){
            this.grouplist.push(res.data.data.slice(i,i+chunk));
        }
        console.log(this.grouplist);



        // 给总量赋值
        this.total = res.data.total;
      });
    },

    handleSizeChange(num) {
      console.log("显示条数", num);
      this.query.pageSize = num;
      this.query.pageNum = 1;

      // 重新获取数据
      this.getGroupList();
    },
    handleCurrentChange(num) {
      console.log("当前页", num);
      // 将当前页赋值个currpage
      this.query.pageNum = num-1;
      // 重新获取数据
      this.getGroupList();
    },
  },
};
</script>

<style scoped lang="scss">
.tab {
  margin-top: 20px;
  .paging {
    width: 100%;
    height: 50px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>